<template>
  <a-card title="服务板块" :bordered="false" class="br-10">
    <template #extra>
      <a-button type="primary" size="default" @click="handleSmallAdd">新增</a-button>
    </template>
    <a-table size="default" ref="table" rowKey="id" :pagination="false" :columns="columns" :data-source="smallList">
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a-button type="primary" ghost size="small" class="_mr-5" @click="handleSmallEdit(record)">
          编辑
        </a-button>
        <a-button type="primary" ghost size="small" class="_mr-5" @click="delByIds(record)">
          删除
        </a-button>
      </span>
    </a-table>
    <small-form ref="smallForm" @ok="handleSmallList" />
  </a-card>
</template>

<script>
import { extBigGet } from '@/api/system/system'
import { configAppBasisDataList, delConfigAppBasisData } from '@/api/web/web'
import smallForm from './smallForm'
export default {
  name: 'MemberType',
  components: {
    smallForm
  },
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      // 查询参数
      queryParam: { status: '' },
      // 表头
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px'
        },
        {
          title: '标题',
          dataIndex: 'name',
          width: '200px',
          ellipsis: true
        },
        {
          title: '简介',
          dataIndex: 'desc',
          ellipsis: true
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      selectedRowKeys: [],
      selectedRows: [],
      ids: [],
      bigInfo: {},
      smallList: []
    }
  },
  created() {
    this.handleSmallList()
  },
  methods: {
    // 获取小标题
    handleSmallList() {
      return configAppBasisDataList({ type: 3 }).then(res => {
        if (res.code === 0) {
          this.smallList = res.data.records || []
        }
      })
    },

    handleSmallAdd() {
      var params = {
        title: '新增小标题',
        type: 'add'
      }
      this.$refs.smallForm.add(params)
    },

    handleSmallEdit(record) {
      var params = {
        title: '编辑小标题',
        type: 'edit',
        data: record
      }
      this.$refs.smallForm.edit(params)
    },

    handleOk() {
      this.$refs.table.refresh(true)
    },
    handleReload() {
      this.$refs.table.refresh()
    },
    delByIds(info) {
      var _this = this
      this.$confirm({
        title: `确定删除'${info.name}'？`,
        onOk() {
          // var params = {
          //   id: info.id
          // }
          delConfigAppBasisData(info.id).then(res => {
            if (res.code === 0) {
              _this.$message.success(`删除成功`)
              _this.handleSmallList()
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
        onCancel() {}
      })
    },

    onSelectChange(selectedRowKeys, selectedRows) {
      this.ids = []
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      for (var item of selectedRows) {
        this.ids.push(item.id)
      }
    }
  }
}
</script>
